import React from 'react'
import PropTypes from 'prop-types'
import {Col, DatePicker, Form, Input, InputNumber, Modal, Row, Select} from 'antd'

const FormItem = Form.Item
const {Option} = Select

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
  style: {
    marginBottom: 10,
  },
}

const ColProps = {
  xl: 6,
  md: 8,
  sm: 12,
  xs: 24,
  style: {
    marginBottom: 6,
  },
}

const modal = ({
                 item = {},
                 onOk,
                 handleSearch,
                 dataSource,
                 handleFormReset,
                 toggleForm,
                 form: {
                   getFieldDecorator,
                   validateFields,
                   getFieldsValue,
                 },
                 ...modalProps
               }) => {
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...getFieldsValue(),
        key: item.key,
      }
      onOk(data)
    })
  }

  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }

  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <Row gutter={24}>
          <Col {...ColProps} >
            <FormItem {...formItemLayout} label="运营微号">
              {getFieldDecorator('operatorWxId')(<Input placeholder="运营微信号"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="归属员工">
              {getFieldDecorator('empId')(<Input placeholder="员工工号或姓名"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="推广员工">
              {getFieldDecorator('no')(<Input placeholder="员工工号或姓名"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="支付密码">
              {getFieldDecorator('payPassword')(<Input placeholder="支付密码"/>)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="登陆密码">
              {getFieldDecorator('password')(<Input placeholder="登陆密码"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="人物IP">
              {getFieldDecorator('ip')(
                <Select allowClear placeholder="请选择">
                  <Option value={1}>{'IP1'}</Option>
                  <Option value={2}>{'IP2'}</Option>
                  <Option value={3}>{'IP3'}</Option>
                </Select>,
              )}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="好友总数">
              {getFieldDecorator('total')(<Input placeholder="请输入"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="朋友圈类型">
              {getFieldDecorator('type')(
                <Select allowClear placeholder="请选择">
                  <Option value={1}>{'类型1'}</Option>
                  <Option value={2}>{'类型2'}</Option>
                  <Option value={3}>{'类型3'}</Option>
                </Select>,
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="自身来源">
              {getFieldDecorator('src')(
                <Select allowClear placeholder="请选择">
                  <Option value={1}>{'来源1'}</Option>
                  <Option value={2}>{'来源2'}</Option>
                  <Option value={3}>{'来源3'}</Option>
                </Select>,
              )}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="运营状态">
              {getFieldDecorator('status')(
                <Select allowClear placeholder="请选择">
                  <Option value={1}>{'状态1'}</Option>
                  <Option value={2}>{'状态2'}</Option>
                  <Option value={3}>{'状态3'}</Option>
                </Select>,
              )}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="绑定手机">
              {getFieldDecorator('bindphone')(<Input placeholder="请输入"/>)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="最后更新时间">
              {getFieldDecorator('lastupdate')(<DatePicker placeholder="请选择"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="被封次数">
              {getFieldDecorator('number')(<InputNumber placeholder="请输入"/>)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col {...ColProps}>
            <FormItem {...formItemLayout} label="注册日期">
              {getFieldDecorator('register')(<DatePicker placeholder="请选择"/>)}
            </FormItem>
          </Col>
          <Col {...ColProps} xl={{span: 15}}>
            <FormItem labelCol={{span: 3}} wrapperCol={{span: 21}} label="支付绑定">
              <Col span={3}>
                <FormItem>
                  {getFieldDecorator('ckname')(<Input placeholder="持卡人姓名"/>)}
                </FormItem>
              </Col>
              <Col span={1}>
                <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                  -
                </span>
              </Col>
              <Col span={6}>
                <FormItem>
                  {getFieldDecorator('idcard')(<Input placeholder="身份证"/>)}
                </FormItem>
              </Col>
              <Col span={1}>
                <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                  -
                </span>
              </Col>
              <Col span={6}>
                <FormItem>
                  {getFieldDecorator('banknum')(<Input placeholder="银行卡"/>)}
                </FormItem>
              </Col>
              <Col span={1}>
                <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                  -
                </span>
              </Col>
              <Col span={4}>
                <FormItem>
                  {getFieldDecorator('bankphonenum')(<Input placeholder="预留手机号"/>)}
                </FormItem>
              </Col>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
